<template>
    <div class="write">
        <div class="write-title">
            <el-input
                resize="none"
                type="textarea"
                autosize
                placeholder="请输入标题"
                class="me-write-input"
            >
            </el-input>
        </div>
        <div class="write-down">
            <mavon-editor class="me-editor" ref="md" v-model="content" @imgAdd="uploadImg" />
        </div>
    </div>
</template>

<script>
import MarkdownIt from "markdown-it";
//  markdown编辑器
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

export default {
    name: "BlogWrite",
    props: {
        editor: Object,
    },
    methods:{
uploadImg(pos, file) {
    var formData = new FormData();
    formData.append('img', file);
    // 上传图片 接口
    richTextImgUpload(formData).then(res => {
        if(res.error == 0){
            // 将后端返回的地址替换即可
            this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API_ORIGIN + res.data.imgscr)
        }
    })
},
    },

    computed: {
        markdown() {
            const md = new MarkdownIt();
            const result = md.render(this.content);
            return result;
        },

    },
    data() {
        return {
            content: "",
            articleForm: {
                editor: {
                    value: "",
                    ref: "", //保存mavonEditor实例  实际不该这样
                    default_open: "edit",
                    toolbars: {
                        bold: true, // 粗体
                        italic: true, // 斜体
                        header: true, // 标题
                        underline: true, // 下划线
                        strikethrough: true, // 中划线
                        mark: true, // 标记
                        superscript: true, // 上角标
                        subscript: true, // 下角标
                        quote: true, // 引用
                        ol: true, // 有序列表
                        ul: true, // 无序列表
                        imagelink: true, // 图片链接
                        code: true, // code
                        fullscreen: true, // 全屏编辑
                        readmodel: true, // 沉浸式阅读
                        help: true, // 帮助
                        undo: true, // 上一步
                        redo: true, // 下一步
                        trash: true, // 清空
                        navigation: true, // 导航目录
                        //subfield: true, // 单双栏模式
                        preview: true, // 预览
                    },
                },
            },
        };
    },
};
</script>

<style>
.write {
    display: flex;
    width: 100vw;
    height: 100vh;
}
.write-down{
       /* position: absolute; */
        display: flex;
    margin-bottom:100px;
    margin-top: 100px;
    margin-left: 18.5%;
}
.write-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.me-write-input textarea {
    font-size: 32px;
    font-weight: 600;
    height: 20px;
    border: none;
}
.me-write-editor {
    min-height: 650px !important;
}
.v-note-wrapper.shadow{
      max-width: 1000px;
      height: 500px;
  /* height: 750px; */
}
</style>
